<template>
    <div id="usertable-outer">
        <div id="labtable-block">
            <div id="labtable">
                <el-table :data="labData.labList" 
                style="width: 100%"
                >
                    <el-table-column prop="id" label="ID" width="80"/>
                    <el-table-column prop="tag" label="类型" width="150" />
                    <el-table-column prop="label" label="实验室名称" width="150" />
                    <el-table-column prop="size" label="容量" width="100" />
                    <el-table-column prop="function" label="功能" width="340"  />
                    <el-table-column prop="location" label="位置" width="100" />
                    <el-table-column prop="create_at" label="创建时间" width="100"/>
                    <el-table-column label="查看详情" width="100" >
                        <template #default="scope">
                            <el-button @click="checkLab(scope.row.id)" type="info">前往</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div id="pagination-block">
            <el-pagination
                v-model:currentPage="labData.currentPage"
                :page-size=10
                :small="false"
                :disabled="false"
                :background="true"
                layout="prev, pager, next"
                v-model:total="labData.total"
                @current-change="handleCurrentChange"
                ></el-pagination>
                <span />
                <text v-text="paginationBar"></text>
            <el-button type="primary" id="refreash-button" @click="initData()" :icon="Refresh"></el-button>
        </div>
    </div>
</template>

<script>
    import axios from "axios"
    import {ElMessage} from "element-plus"
    import {Refresh} from "@element-plus/icons-vue"
    

    export default {
        data() {
            return {
                Refresh: Refresh,
                labData:{
                    total:0,
                    currentPage:1,
                    labList:null
                },
                
            };
        },
        computed:{
            paginationBar(){
                return "共"+this.labData.total+"条记录 第"+this.labData.currentPage+"/"+(Math.ceil(this.labData.total/10))+"页"
            }
        },
        methods:{
            checkLab(id){
                this.$router.push("/index/adminCheckLab/"+id)
            },
            getLabList(page){
                axios.post("/lab/queryLabs",{"id":page}).then((response) => {
                if(response.data.code == 0){
                    let data = response.data.data
                    console.log(data)
                    for(let i in data){
                        data[i].create_at = (new Date(data[i].create_at)).toLocaleDateString()
                        data[i].update_at = (new Date(data[i].update_at)).toLocaleDateString()
                    }   
                    this.labData.labList = response.data.data
                }
                else
                {
                    ElMessage.error("error-code:"+response.data.code+" error-msg:"+response.data.msg)
                } 
            })
                
            },  
            handleCurrentChange(val){
                this.getLabList(val)
                this.labData.currentPage = val
            },
            initData(){
                let that = this
                that.getLabList(that.labData.currentPage),
                axios.post("/lab/queryNumber").then((res)=>{
                    if(res.data.code == 0){                    
                        that.labData.total = res.data.data
                    }
                    else
                    {
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg)
                    }
                })
                
            }
        },
        mounted(){
            this.initData();
        }
    }
    
</script>

<style scopted>

#labtable-outer{
    height: 100%;
    width:100%;
}

#labtable{
    width:94%;
    height: 100%;
    margin-left: 3%;
    margin-right: 3%;
}

#labtable-block{
    height: 90%;
    width:100%;
    padding-top:10px;
}


#pagination-block{
    height: 10%;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#refreash-button{
    position:fixed;
    bottom:40px;
    right:20%;
}


</style>

